
<template>
  <div class="button-demo">
    <MButton :gradient="true" :block="true" size="small" >small  gradient block</MButton>
    <MButton :gradient="true" :block="true" size="large" >large  gradient block</MButton>
    <MButton :gradient="true" :round="true" :block="true" size="large" >hotfil</MButton>
    <br />
    <MButton :gradient="true">gradient</MButton>
    <MButton gradient="linear-gradient(to right, #ff9569 0%, #e92758 100%)">gradient</MButton>
    <MButton gradient="#29bdd9">gradient</MButton>
  </div>
</template>

<script lang="ts">
import { defineComponent} from "vue";

export default defineComponent({
  components: {

  }
})
</script>
<style>
.button-demo {
  padding: 10px;
}

.button-demo .m-button {
  margin-right: 8px;
  margin-bottom: 12px;
}

.bg-pink {
  background: #666;
}
</style>